<template>
  <div class="AddOrUpdate_main add_container column_three">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="报修单号" prop="code" class="repairs">
          <el-input v-model="formData.code" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item v-model="formData.standingBookId" label="报修设备" prop="bookName">
          <el-input v-model="formData.bookName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item v-model="formData.deviceStatusCode" label="设备状态" prop="deviceStatusLabel">
          <el-input v-model="formData.deviceStatusLabel" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="设备故障时间" prop="malfunctionTime">
          <el-input v-model="formData.malfunctionTime" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="期望修复时间" prop="expectedTime">
          <el-input v-model="formData.expectedTime" placeholder="暂无" disabled />
        </el-form-item>
        <el-divider />
        <el-form-item v-model="formData.typeId" label="故障类型" prop="typeName">
          <el-input v-model="formData.typeName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item v-model="formData.emergencyDegree" label="紧急程度" prop="emergencyDegreeLabel">
          <el-input v-model="formData.emergencyDegreeName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item v-model="formData.reportPersonId" label="报修人员" prop="reportPersonName">
          <el-input v-model="formData.reportPersonName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="故障情况拍照" class="double">
          <FileManageFull
            :file-names="formData.docName"
            :file-real-names="formData.docRealName"
            :file-urls="formData.docUrl"
            :readonly="true"
          />
        </el-form-item>
        <el-form-item label="附件" class="double">
          <FileManageFull
            :file-names="formData.fileName"
            :file-real-names="formData.fileRealName"
            :file-urls="formData.fileUrl"
            :readonly="true"
          />
        </el-form-item>
        <el-form-item label="故障现象" prop="phenomenon" class="double">
          <el-input v-model="formData.phenomenon" type="textarea" placeholder="暂无" disabled />
        </el-form-item>
        <el-divider />
        <el-form-item v-if="!isRoleSelect" label="维修人员" prop="repairPersonId" class="clickChoose">
          <el-input v-model="formData.repairPersonName" placeholder="请选择" readonly />
          <a class="clickChoose_button" @click.prevent="chooseTeamAndPeople">
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item>
        <el-form-item v-else label="维修人员" prop="repairPersonId" class="clickChoose">
          <el-input v-model="formData.repairPersonName" placeholder="请选择" readonly />
          <a class="clickChoose_button" @click.prevent="chooseRoleAndPeople">
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item>
        <el-form-item label="计划修复时间范围" prop="planTimeArr" class="double">
          <el-date-picker
            v-model="formData.planTimeArr"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            placeholder="请选择"
            :editable="false"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { getSystemSet } from '@/api/common/systemSet'
import chooseRolePeople from '@/views/equipmentManage/equipmentRepair/equipmentReportRepair/chooseRolePeople.vue'
import { addOrUpdate, getInfo, personnellist } from '@/api/equipmentManage/equipmentRepair/repairAssignment'
import chooseTeam from '../../baseInfo/maintenanceTeam/chooseTeam.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    const validateTime = (rule, value, callback) => {
      if (this.formData.expectedTime < this.formData.malfunctionTime) {
        callback(new Error('期望修复时间不能小于故障时间'))
      } else {
        callback()
      }
    }
    const planTimeArr = (rule, value, callback) => {
      if (this.formData.planTimeArr == '' || this.formData.planTimeArr == null) {
        callback(new Error('计划修复时间不能为空'))
      } else {
        if (this.formData.planTimeArr < this.formData.malfunctionTime) {
          callback(new Error('计划修复时间范围不能小于设备故障时间'))
        } else {
          callback()
        }
      }
    }
    return {
      formData: {
        isSubmit: 1,
        id: undefined,
        code: undefined,
        name: undefined,
        roleIdsArray: undefined,
        roleIds: undefined,
        bookName: undefined,
        deviceStatusCode: undefined,
        malfunctionTime: undefined,
        expectedTime: undefined,
        typeName: undefined,
        emergencyDegreeCode: undefined,
        reportPersonName: undefined,
        phenomenon: undefined,
        emergencyDegreeLabel: undefined,
        deviceStatusLabel: undefined,
        standingBookId: undefined,
        typeId: undefined,
        reportPersonId: undefined,
        planTime: undefined,
        planTimeArr: undefined,
        repairPersonId: undefined,
        bookId: undefined,
        emergencyDegreeName: undefined,
        emergencyDegree: undefined,
        repairPersonName: undefined,
        docName: '',
        docRealName: '',
        docUrl: '',
        fileName: '',
        fileRealName: '',
        fileUrl: '',
        status: ''
      },
      isRoleSelect: '',
      rolePeopleInfo: [],
      num: 1,
      roleOptions: [],
      userOptions: [],
      rules: {
        malfunctionTime: [
          { validator: validateTime, trigger: 'change' }
        ],
        expectedTime: [
          { validator: validateTime, trigger: 'change' }
        ],
        planTimeArr: [
          { validator: planTimeArr, required: true, trigger: 'change' }
        ],
        repairPersonId: [
          { required: true, message: '维修人员不能为空', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'companyId'
    ])
  },
  created() {
    this.getList()
    if (!this.id) { // 没有id就是新增
      Object.keys(this.defaultValue).forEach(key => { // 给右边数据赋值
        this.formData[key] = this.defaultValue[key]
      })
    } else { // 有id就是编辑
      this.getInfo()
      this.getList()
    }
    this.getSystemSet()
  },
  methods: {
    getSystemSet() {
      // 获取系统设置数据
      getSystemSet(this.companyId).then(res => {
        // 获取系统设置中的维修人员角色筛选
        this.isRoleSelect = res.data.MaintenanceRole
      })
    },
    getInfo() {
      getInfo(this.id).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key] || undefined
        })
        this.formData.roleIdsArray = this.formData.roleIds.split(',')
      })
    },
    getList() {
      personnellist(this.formData).then(res => {
        this.userOptions = res.data
      })
    },
    // 选择角色人员
    chooseRoleAndPeople() {
      this.$layer.iframe({// 弹框
        content: {
          content: chooseRolePeople, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            selectedRow: this.rolePeopleInfo,
            roleId: this.isRoleSelect
          }// props
        },
        area: ['1200px', '600px'],
        title: '选择维修人员', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    // 选择维保班组和人员
    chooseTeamAndPeople() {
      this.$layer.iframe({// 弹框
        content: {
          content: chooseTeam, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            userId: this.formData.repairPersonId,
            // teamId: this.formData.maintenanceId ? this.formData.maintenanceId : '',
            peopleId: this.formData.maintainPersonId ? this.formData.maintainPersonId : ''
          }// props
        },
        area: ['1200px', '600px'],
        title: '选择维修人员', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    showRolePeople(row) {
      console.log(row)
      this.rolePeopleInfo = row
      this.$nextTick(() => {
        this.formData.repairPersonId = row[0].userId
        this.formData.repairPersonName = row[0].realName
      })
      console.log(this.formData)
    },
    // 选择人员和班组返回id
    showTeamAndPeople(teamId, row, peopleId, num) {
      console.log(row)
      this.formData.maintenanceId = teamId
      this.$nextTick(() => {
        if (peopleId) {
          this.formData.repairPersonId = row.userId
          this.formData.repairPersonName = row.realName
        }
      })
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formData.roleIds = this.formData.roleIdsArray
          this.formData.isSubmit = 1
          addOrUpdate(this.formData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.refresh() // 调用父组件的刷新方法
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>

.main_main{
  /deep/ .el-form-item__label{
    width: 160px !important;
  }
  /deep/ .el-form-item__content{
    width: calc(100% - 140px) !important;
  }
  /deep/ .el-range-separator {
    padding-right: 50px;
  }
}
</style>
